<template>
  <div class="postItem">
    <van-pull-refresh
      v-model="isPullDownLoading"
      @refresh="onRefresh"
      :success-duration="1500"
      success-text="马上加载完成"
    >
      <van-list
        v-model="category.loading"
        :finished="category.finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check="false"
      >
        <van-cell
          v-for="(item, index) in category.myList"
          :key="index"
          @click="$router.push(`/postdetail?id=${item.id}`)"
        >
          <div slot="title" class="title van-multi-ellipsis--l2">
            {{ item.title }}
          </div>
          <div slot="label">
            <!-- 三张或以上的图片 -->
            <div class="imags" v-if="item.type == 1 && item.cover.length >= 3">
              <!-- <van-image
                v-for="(imgUrl, index) in item.cover"
                :key="index"
                :src="imgUrl.url"
              /> -->
              <van-image :src="item.cover[0].url" />
              <van-image :src="item.cover[1].url" />
              <van-image :src="item.cover[2].url" />
            </div>
            <!-- 视频的情况下 -->
            <div class="video" v-if="item.type == 2 && item.cover.length >= 1">
              <video
                :src="item.cover[0].url"
                :poster="item.cover[0].url"
                autoplay="autoplay"
              ></video>
              <div class="play">
                <div class="iconfont iconshipin"></div>
              </div>
            </div>
            <div class="info">
              <span class="huoxing">{{ item.user.nickname }}</span>
              <span>{{ item.comment_length }}跟贴</span>
            </div>
          </div>
          <!-- //默认插槽 -->
          <!-- 图片小于三张 -->
          <div
            slot="default"
            v-if="
              item.type == 1 && item.cover.length >= 1 && item.cover.length < 3
            "
          >
            <van-image
              width="112px"
              height="72px"
              :src="item.cover[0].url | fixImgUrl"
            />
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  data() {
    return {
      postList: [],
      loading: false,
      finished: false,
      isPullDownLoading: false,
    };
  },
  props: ["category"],
  //添加一个路劲过滤器
  filters: {
    fixImgUrl(oldUrl) {
      const reg = /^http/;
      if (reg.test(oldUrl)) {
        return oldUrl;
      } else {
        return "http://157.122.54.189:9083" + oldUrl;
      }
    },
  },
  //页面进来第一次加载数据
  created() {
    this.pageLoad();
  },

  methods: {
    //页面下拉刷新
    onLoad() {
      this.category.pageIndex += 1;
      this.pageLoad();
    },
    //下拉刷新页面
    onRefresh() {
      //   console.log(22);
      this.pageLoad();
      this.isPullDownLoading = false;
    },
    //封装页面加载
    pageLoad() {
      this.$axios({
        url: "/post",
        params: {
          category: this.category.id,
          pageIndex: this.category.pageIndex,
          pageSize: this.category.pageSize,
        },
      }).then((res) => {
        console.log(res.data);
        // console.log(this.category.id);
        this.category.myList = [...this.category.myList, ...res.data.data];
        console.log(333, this.category.myList);
        // 加载状态结束
        this.category.loading = false;
        // 还要进行最后一页的校验, 如果获取的数据长度, 比设定的要求小
        // 证明已经翻到最后一页, 将当前分类 finished 设为 true
        if (res.data.data.length < this.category.pageSize) {
          this.category.finished = true;
        }
      });
    },
  },
};
</script>

<style lang="less">
.postItem {
  .title {
    font-size: 16/360 * 100vw;
  }
  .info {
    font-size: 14/360 * 100vw;
    .huoxing {
      margin-right: 10/360 * 100vw;
    }
  }
  .imags {
    .van-image {
      width: 32%;
      height: 72/360 * 100vw;
      margin-right: 4px;
      object-fit: cover;
    }
  }
  .video {
    width: 100%;
    height: 170/360 * 100vw;
    position: relative;
    video {
      width: 100%;
      height: 100%;
    }
    .play {
      position: absolute;
      top: 51/360 * 100vw;
      left: 133/360 * 100vw;
      width: 55/360 * 100vw;
      height: 55/360 * 100vw;
      text-align: center;
      line-height: 55/360 * 100vw;
      background-color: #cccccc;
      border-radius: 50%;
      opacity: 0.6;
      .iconshipin {
        font-size: 50/360 * 100vw;
        color: #ffffff;
      }
    }
  }
}
</style>